Choose your plan | Free $0.00 | Bronze $9.99 | Silver $19.99 | Gold $49.99 |
---|---|---|---|---|
Setup & Installation | ||||
HTML Templates | ||||
SMS Templates | ||||
API Included | ||||
Tracking System | Basic Tracking |
<!-- Pricing table --> <table class="table table-white table-vertical-center table-pricing"> <!-- Table heading --> <thead> <tr> <th class="center heading">Choose your plan</th> <th class="center" style="width: 15%"> <span class="plan">Free</span> <span class="price">$0.00</span> <div class="separator bottom"></div> <button class="btn btn-primary btn-block">Sign up</button> </th> <th class="center" style="width: 15%"> <span class="plan">Bronze</span> <span class="price">$9.99</span> <div class="separator bottom"></div> <button class="btn btn-primary btn-block">Sign up</button> </th> <th class="center" style="width: 15%"> <span class="plan">Silver</span> <span class="price">$19.99</span> <div class="separator bottom"></div> <button class="btn btn-primary btn-block">Sign up</button> </th> <th class="center" style="width: 15%"> <span class="plan">Gold</span> <span class="price">$49.99</span> <div class="separator bottom"></div> <button class="btn btn-primary btn-block">Sign up</button> </th> </tr> </thead> <!-- // Table heading END --> <!-- Table body --> <tbody> <!-- Table row --> <tr> <td>Setup & Installation</td> <td class="center"><span class="glyphicons standard circle_ok"><i></i></span></td> <td class="center"><span class="glyphicons standard circle_ok"><i></i></span></td> <td class="center"><span class="glyphicons standard circle_ok"><i></i></span></td> <td class="center"><span class="glyphicons standard circle_ok"><i></i></span></td> </tr> <!-- // Table row END --> <!-- Table row --> <tr> <td>HTML Templates</td> <td class="center"><span class="glyphicons standard remove_2"><i></i></span></td> <td class="center"><span class="glyphicons standard remove_2"><i></i></span></td> <td class="center"><span class="glyphicons standard circle_ok"><i></i></span></td> <td class="center"><span class="glyphicons standard circle_ok"><i></i></span></td> </tr> <!-- // Table row END --> <!-- Table row --> <tr> <td>SMS Templates</td> <td class="center"><span class="glyphicons standard circle_ok"><i></i></span></td> <td class="center"><span class="glyphicons standard circle_ok"><i></i></span></td> <td class="center"><span class="glyphicons standard circle_ok"><i></i></span></td> <td class="center"><span class="glyphicons standard circle_ok"><i></i></span></td> </tr> <!-- // Table row END --> <!-- Table row --> <tr> <td>API Included</td> <td class="center"><span class="glyphicons standard remove_2"><i></i></span></td> <td class="center"><span class="glyphicons standard circle_ok"><i></i></span></td> <td class="center"><span class="glyphicons standard circle_ok"><i></i></span></td> <td class="center"><span class="glyphicons standard circle_ok"><i></i></span></td> </tr> <!-- // Table row END --> <!-- Table row --> <tr> <td>Tracking System</td> <td class="center">Basic Tracking</td> <td class="center"><span class="glyphicons standard circle_ok"><i></i></span></td> <td class="center"><span class="glyphicons standard circle_ok"><i></i></span></td> <td class="center"><span class="glyphicons standard circle_ok"><i></i></span></td> </tr> <!-- // Table row END --> </tbody> <!-- // Table body END --> </table> <!-- // Pricing table END -->
@import "assets/components/modules/admin/tables/classic/assets/less/tables.less"; @import "http://localhost/shared/components/modules/admin/tables/pricing/assets/less/tables-pricing.less"; @import "assets/components/modules/admin/ui/buttons/assets/buttons.less";
<head>
section of your HTML document, before any JavaScript files: <link type="stylesheet/less" href="styles.less" />
NOTE All the styles from the CORE package also need to be imported in this file, before the component imports.
Free Plan | Bronze Plan | Silver Plan | Gold Plan |
---|---|---|---|
$0.00 per month | $9.99 per month | $19.99 per month | $49.99 per month |
Setup & Installation HTML Templates SMS Templates API Included Tracking system |
Setup & Installation HTML Templates SMS Templates API Included Tracking system |
Setup & Installation HTML Templates SMS Templates API Included Tracking system |
Setup & Installation HTML Templates SMS Templates API Included Tracking system |
<!-- Pricing table --> <table class="table table-vertical-center table-pricing table-pricing-2"> <!-- Table heading --> <thead> <tr> <th class="center">Free Plan</th> <th class="center">Bronze Plan</th> <th class="center">Silver Plan</th> <th class="center">Gold Plan</th> </tr> </thead> <!-- // Table heading END --> <!-- Table body --> <tbody> <!-- Table pricing row --> <tr class="pricing"> <td class="center"> <span class="price">$0.00</span> <span>per month</span> </td> <td class="center"> <span class="price">$9.99</span> <span>per month</span> </td> <td class="center"> <span class="price">$19.99</span> <span>per month</span> </td> <td class="center"> <span class="price">$49.99</span> <span>per month</span> </td> </tr> <!-- // Table pricing row END --> <!-- Table row --> <tr> <td class="center"> Setup & Installation<br/> HTML Templates<br/> SMS Templates<br/> API Included<br/> Tracking system <div class="separator bottom"></div> <button class="btn btn-primary">Sign up</button> </td> <td class="center"> Setup & Installation<br/> HTML Templates<br/> SMS Templates<br/> API Included<br/> Tracking system <div class="separator bottom"></div> <button class="btn btn-primary">Sign up</button> </td> <td class="center"> Setup & Installation<br/> HTML Templates<br/> SMS Templates<br/> API Included<br/> Tracking system <div class="separator bottom"></div> <button class="btn btn-primary">Sign up</button> </td> <td class="center"> Setup & Installation<br/> HTML Templates<br/> SMS Templates<br/> API Included<br/> Tracking system <div class="separator bottom"></div> <button class="btn btn-primary">Sign up</button> </td> </tr> <!-- // Table row END --> </tbody> <!-- // Table body END --> </table> <!-- // Pricing table END -->
@import "assets/components/modules/admin/tables/classic/assets/less/tables.less"; @import "http://localhost/shared/components/modules/admin/tables/pricing/assets/less/tables-pricing.less"; @import "assets/components/modules/admin/ui/buttons/assets/buttons.less";
<head>
section of your HTML document, before any JavaScript files: <link type="stylesheet/less" href="styles.less" />
NOTE All the styles from the CORE package also need to be imported in this file, before the component imports.
<div class="table-pricing-3"> <ul class="list-unstyled row"> <li class="col-md-4"> <div class="innerAll"> <h3>Starter</h3> <div class="body"> <div class="price"> Free </div> </div> <div class="features"> <ul> <li>Basic Support</li> <li>Unlimited Email Alerts</li> <li>Free Weekly Digests</li> <li><strong>5 Email</strong> Templates</li> <li>Customizable Profile Page</li> <li><strong>2 months</strong> listing</li> </ul> </div> <div class="footer"> <a href="#" class="btn btn-success">Get Started</a> </div> </div> </li> <li class="col-md-4 active"> <div class="innerAll"> <h3>Silver</h3> <div class="body"> <div class="price"> <span class="figure">€19.99</span> <span class="term">per month</span> </div> </div> <div class="features"> <ul> <li>Dedicated Support</li> <li>Unlimited Email Alerts</li> <li>Free Weekly Digests</li> <li><strong>20 Email</strong> Templates</li> <li>Customizable Profile Page</li> <li><strong>6 months</strong> listing</li> </ul> </div> <div class="footer"> <a href="#" class="btn btn-success">Get Started</a> </div> </div> </li> <li class="col-md-4"> <div class="innerAll"> <h3>Gold</h3> <div class="body"> <div class="price"> <span class="figure">€49</span> <span class="term">per month</span> </div> </div> <div class="features"> <ul> <li>Premium Support</li> <li>Unlimited Email Alerts</li> <li>Free Weekly Digests</li> <li><strong>50 Email</strong> Templates</li> <li>Customizable Profile Page</li> <li><strong>Lifetime</strong> listing</li> </ul> </div> <div class="footer"> <a href="#" class="btn btn-success">Get Started</a> </div> </div> </li> <div class="clearfix"></div> </ul> </div>
@import "assets/components/modules/admin/tables/classic/assets/less/tables.less"; @import "http://localhost/shared/components/modules/admin/tables/pricing/assets/less/tables-pricing.less"; @import "assets/components/modules/admin/ui/buttons/assets/buttons.less";
<head>
section of your HTML document, before any JavaScript files: <link type="stylesheet/less" href="styles.less" />
NOTE All the styles from the CORE package also need to be imported in this file, before the component imports.